Developer Guide (API Reference) > HTML5 Viewer > Parameters |
The HTML5 Viewer supports a list of parameters that are used to customize the user interface and specify the documents and annotations that should be loaded.
The following example shows how to configure the parameters:
JavaScript Example |
Copy Code
|
---|---|
<script type="text/javascript"> $(document).ready(function() { var pluginOptions = { documentID: "sample.pdf", toolboxMenuOpen: false, uiElements: { defaultMouseTool: "selectText", textColor: "#222222" }, language: { rotateLeft: "Turn Left", searchLabel: "Find" } }; $("#sample").pccViewer(pluginOptions); }); </script> |
Parameter |
Data Type |
Description |
documentID |
String |
Specifies the document to be loaded within the viewer. |
imageHandlerUrl |
String |
Specifies the location of the image handler. |
annotationID |
String |
Specifies the annotation file to be used within the viewer. |
resourcePath |
String |
The location of the toolbox icons within of the viewer. By default, this is set to the "Images" folder. Please note, the viewer also references background images used within the style sheet (pcc.css) that will also need to be updated in the event that the "Images" folder is renamed or moved. |
toolboxMenuOpen |
Boolean |
Whether the toolbox menu should be opened or closed when the viewer is initialized. |
fitType | String | How the document should be rendered within the viewer. The options are: "FullImage", "ActualSize", "FullHeight", and "FullWidth". If no option is specified, the default fitType will be "FullImage". |
rotationDegreesClockwise | String | Specifies the rotation (in degrees clockwise) to be used when a page is loaded in the viewer. Valid options are: 0, 90, 180, 270, -90, -180, and -270. If an invalid value is specified, the default value of 0 is used. |
zoomFactor | String | Specifies the zoom factor to be used when a page is loaded in the viewer. This parameter takes precedence over the fitType parameter. If no option, 0, or an invalid value is specified, then fitType is used. Valid values are between 0 and 20. |
maintainZoomLevel | Boolean | Specifies whether or not to maintain the zoom level while navigating between pages. Note: Currently, this parameter only effects the zoom level when set using the toolbar zoom buttons. The zoom level is not maintained when modified via the Context menu. |
Parameter |
Data Type |
Description |
defaultMouseTool | String | The default tool selected within the viewer. The options are: selectToZoom, panTool, magnifierTool and selectText. If no option is specified, the selectText tool will be the default. |
tooltips |
Boolean |
Enable or disable tooltips within the viewer. |
navigation |
Boolean |
Hide or show the navigation bar. |
contextMenu | Boolean | Hide or show the contextMenu. |
firstLastPage |
Boolean |
Hide or show the First and Last page navigation buttons. |
nextPreviousPage |
Boolean |
Hide or show the Next and Previous page navigation buttons. |
toolboxMenu |
Boolean |
Hide or show the toolbox menu. |
zoomIn |
Boolean |
Hide or show the zoom-in button. |
zoomOut |
Boolean |
Hide or show the zoom-out button. |
printing | Boolean | Hide or show the printing button. |
fullScreenToggle |
Boolean |
Hide or show the Full Screen toggle button. |
fullScreenOnInit | Boolean | Launch the viewer in Full Screen mode. |
viewTab |
Boolean |
Hide or show the View Tab |
magnifierTool |
Boolean |
Hide or show the magnifier tool, located within the View Tab. |
selectToZoom |
Boolean |
Hide or show the select to zoom tool, located within the View Tab. |
panTool |
Boolean |
Hide or show the pan tool, located within the View Tab. |
rotateRight |
Boolean |
Hide or show the rotate right button, located within the View Tab. |
rotateLeft |
Boolean |
Hide or show the rotate left button, located within the View Tab. |
viewFullImage |
Boolean |
Hide or show the view full image button, located within the View Tab. |
fitToWidth |
Boolean |
Hide or show the fit to width button, located within the View Tab. |
fitToHeight |
Boolean |
Hide or show the fit to height button, located within the View Tab. |
viewActualSize |
Boolean |
Hide or show the view actual size button, located within the View Tab. |
searchTab | Boolean | Hide or show the Search Tab. |
thumbnailTab |
Boolean |
Hide or show the Thumbnail Tab. |
annotateRedactTab |
Boolean |
Hide or show the Annotate & Redact Tab. This requires a product license that supports annotation and/or redaction features. |
annotateTab |
Boolean |
Hide or show the Annotate Tab. If the annotateRedactTab is marked to false, this value will be overridden. This requires a product license that supports annotation features. |
redactTab |
Boolean |
Hide or show the Redact Tab. This requires a product license that supports redaction features. |
saveLoadAnnotations |
Boolean |
Hide or show the save and load functionality for annotations and redactions. |
arrowAnnotation |
Boolean |
Hide or show the arrow annotation button, located within the Annotate Tab. |
lineAnnotation |
Boolean |
Hide or show the line annotation button, located within the Annotate Tab. |
rectangleAnnotation |
Boolean |
Hide or show the rectangle annotation button, located within the Annotate Tab. |
transparentAnnotation | Boolean | Hide or show the transparent annotation button, located within the Annotate Tab. |
ellipseAnnotation |
Boolean |
Hide or show the ellipse annotation button, located within the Annotate Tab. |
editMarks |
Boolean |
Hide or show the edit marks button, located within the Annotate and Redact Tabs. |
deleteMarks |
Boolean |
Hide or show the delete marks button, located within the Annotate and Redact Tabs. |
textAnnotation |
Boolean |
Hide or show the text annotation button, located within the Annotate and Redact Tabs. |
stampAnnotation | Boolean | Hide or show the stamp annotation button, located within the Annotate Tab. |
stampAnnotationLabels | Array | Array of selectable options. By default, the values are: ["APPROVED","REVIEWED","REJECTED"] |
stampColor | String | Specifies the Hexadecimal color code for the stamp annotation. By default, the color is: #000000. |
stampRedactionLabels | Array | Array of selectable options. By default, the values are: ["APPROVED","REVIEWED","REJECTED"] |
rectangleRedaction |
Boolean |
Hide or show the rectangle redaction button, located within the Redact Tab. |
transparentRedaction |
Boolean |
Hide or show the transparent redaction button, located within the Redact Tab. |
textRedaction |
Boolean |
Hide or show the text redaction button, located within the Redact Tab. |
stampRedaction | Boolean | Hide or show the stamp redaction button, located within the Redact Tab. |
arrowColor | String | Specifies the Hexadecimal color code for the arrow annotation. By default, the color is: #FB0404. |
lineColor | String | Specifies the Hexadecimal color for the line annotation. By default, the color is: #18385F. |
rectangleColor | String | Specifies the Hexadecimal color for the rectangle annotation. By default, the color is: #FB0404. |
transparentColor | String | Specifies the Hexadecimal color for the transparent annotation. By default, the color is: #FFFF00. |
ellipseColor | String | Specifies the Hexadecimal color for the ellipse annotation. By default, the color is: #FB0404. |
textColor | String | Specifies the Hexadecimal color for the text annotation. By default, the color is: #000000. |
The language parameters allow you to redefine the text strings used in the HTML5 Viewer. This allows you to localize the UI elements to meet different language requirements.
The following example shows how to configure the language parameters:
JavaScript Example |
Copy Code
|
---|---|
<script type="text/javascript"> $(document).ready(function () { var languageItems: { about: “sobre PCC”, contextMenu: { thicknessMenu: {item1: "1", item2: "2", ... } }; var pluginOptions = { language: languageItems, uiElements: { advancedSearch: false } }; $("#sample").pccViewer(pluginOptions); }); </script> |
Parameter |
Data Type |
Description |
||||
about |
String |
Tooltip for the "About PCC" button. |
||||
magnifierTool |
String |
Tooltip for the "Magnifier Tool" button. |
||||
selectToZoom |
String |
Tooltip for the "Zoom to Selected" button. |
||||
panTool |
String |
Tooltip for the "Pan Tool" button. |
||||
rotateRight |
String |
Tooltip for the "Rotate Right" button. |
||||
rotateLeft |
String |
Tooltip for the "Rotate Left" button. |
||||
viewFullImage |
String |
Tooltip for the "Show Full Image" button. |
||||
fitToWidth |
String |
Tooltip for the "Fit to Width" button. |
||||
fitToHeight |
String |
Tooltip for the "Fit to Height" button. |
||||
viewActualSize |
String |
Tooltip for the "Display Actual Size" button. |
||||
arrowAnnotation |
String |
Tooltip for the "Draw Arrow" button. |
||||
lineAnnotation |
String |
Tooltip for the "Draw Line" button. |
||||
rectangleAnnotation |
String |
Tooltip for the "Rectangle" button. |
||||
transparentAnnotation |
String |
Tooltip for the "Transparent Rectangle" button. |
||||
ellipseAnnotation |
String |
Tooltip for the "Create Ellipse" button. |
||||
editMarks |
String |
Tooltip for the "Edit Annotation" button. |
||||
deleteMarks |
String |
Tooltip for the "Delete Selected" button. |
||||
selectText |
String |
Tooltip for the "Select Text" button. |
||||
textAnnotation |
String |
Tooltip for the "Text Annotation" button. |
||||
rectangleRedaction |
String |
Tooltip for the "Filled Rectangle" Redaction button. |
||||
transparentRedaction |
String |
Tooltip for the "Transparent Rectangle" Redaction button. |
||||
textRedaction |
String |
Tooltip for the "Text Redaction" button. |
||||
stampAnnotation |
String |
Tooltip for the "Stamp Annotation" button. |
||||
stampRedaction |
String |
Tooltip for the "Stamp Redaction" button. |
||||
saveAnnotations |
String |
Tooltip for the "Save Annotations" button. |
||||
loadAnnotations |
String |
Tooltip for the "Load Annotations" button. |
||||
saveRedactions |
String |
Tooltip for the "Save Redactions" button. |
||||
editRedactions |
String |
Tooltip for the "Edit Redaction" button. |
||||
deleteRedaction |
String |
Tooltip for the "Delete Selected" Redaction button. |
||||
boldText |
String |
Tooltip for the "Bold Text" button. |
||||
italicText |
String |
Tooltip for the "Italic Text" button. |
||||
alignLeft |
String |
Tooltip for the "Align Left" button. |
||||
alignCenter |
String |
Tooltip for the "Align Center" button. |
||||
alignRight |
String |
Tooltip for the "Align Right" button. |
||||
textColor |
String |
Label for the "Text Color" function. |
||||
annotationColor |
String |
Label for the "Annotation Color" function. |
||||
stampColor |
String |
Label for the "Annotation Color" function. |
||||
update |
String |
Label for the "Update" button on the Color Picker Menu. |
||||
noTextSupport |
String |
The "This page does not support text highlighting" notification that displays when text highlighting is not supported. |
||||
annotationsSaved |
String |
The "Annotations Saved" notification that displays when you save annotations. |
||||
annotationSaveError |
String |
The "Error Saving" notification that displays when there is an error saving annotations. |
||||
annotationsLoaded |
String |
The "Annotations Loaded" notification that displays when annotations are loaded. |
||||
annotationLoadError |
String |
The "Error Loading Annotations" notification that displays when there is an error loading annotations. |
||||
search |
String |
Tooltip for the "Search" button. |
||||
cannotSearch |
String |
The "page(s) cannot be searched." text that displays as part of the summary of pages that cannot be searched. |
||||
cancelSearch |
String |
Tooltip for the "Cancel Search" button. |
||||
noSearchableText |
String |
The "This document does not contain searchable text." notification that displays when the document does not contain searchable text. |
||||
minimumSearch1 |
String |
The "Please enter a keyword" part of the notification that displays when the minimum search length has not been met. |
||||
minimumSearch2 |
String |
The "greater than" part of the notification that displays when the minimum search length has not been met. |
||||
minimumSearch3 |
String |
The "2 characters" part of the notification that displays when the minimum search length has not been met. |
||||
searching |
String |
The "Searching ..." notification that displays while searching. |
||||
errorLoadingDocumentTitle |
String |
The "Error Loading Document" error title that displays when there is an error loading the document. |
||||
errorLoadingDocument |
String |
The "The viewer failed to load the document" error message that displays when there is an error loading the document. |
||||
Toolbox Labels |
||||||
searchLabel |
String |
The "Search" label on the Search toolbox. |
||||
viewLabel |
String |
The "View" label on the View toolbox. |
||||
thumbnailsLabel |
String |
The "Thumbnails" label on the Thumbnails toolbox. |
||||
annotateRedactLabel |
String |
The "Annotate & Redact" label on the Annotate & Redact toolbox. |
||||
annotateLabel |
String |
The "Annotate" label for the Annotate tab. |
||||
redactLabel |
String |
The "Redact Label" for the Redact tab. |
||||
Printing Labels |
||||||
title |
String |
The "Print pages" title on the print menu. |
||||
all |
String |
The "All" label for the All option on the print menu. |
||||
range |
String |
The "Range (1-5, 8, 10-15)" placeholder text for the Range input on the print menu. |
||||
current |
String |
The "Current" label for the Current option on the print menu. |
||||
includeAnnotations |
String |
The "Include Annotations" label for the Include Annotations option on the print menu. |
||||
printButton |
String |
The "Print" button label. |
||||
cancelButton |
String |
The "Cancel" button label. |
||||
requestingDocument |
String |
The "Requesting Document..." notification. |
||||
preparingDocument |
String |
The "Preparing your document for printing..." notification. |
||||
printingRangeError |
String |
The "You have entered an invalid page range" notification. |
||||
preparingPage |
String |
The "Preparing Page" notification. |
||||
of |
String |
The word "of" used in document paging messages. |
||||
Search Labels |
||||||
page |
String |
The "Page" label that displays in the search results. |
||||
displayingResults |
String |
The "Displaying Results" label that displays in the search results. |
||||
yourSearchReturned | String | The "Your Search Returned" message that displays when there are no search results. | ||||
reset |
String |
The "Reset" button label. |
||||
clear |
String |
The word "Clear" used in Clear All labels. |
||||
select |
String |
The word "Select" used in Select All labels. |
||||
results |
String |
The word "Results" used in Clear Results label and Results tab. |
||||
matchExact |
String |
Tooltip for the "Match Exact word or phrase" toggle button. |
||||
matchCase |
String |
Tooltip for the "Match Case" button. |
||||
wholeWord |
String |
Tooltip for the "Whole Word" button. |
||||
useWildcards |
String |
Tooltip for the "Use Wildcards" button. |
||||
beginsWith |
String |
Tooltip for the "Begins With" button. |
||||
endsWith |
String |
Tooltip for the "Ends With" button. |
||||
previousSearches |
String |
Label for "Previous Searches" menu item. |
||||
searchPresets |
String |
Label for "Search Patterns" menu item. |
||||
Context Menu |
||||||
contextMenu |
Object |
Parent object for Context Menu parameters.
|
||||
Viewer Actions |
||||||
zoomInMenuItem |
String |
Label for "Zoom In 25%" menu item. |
||||
zoomOutMenuItem |
String |
Label for "Zoom Out 25%" menu item. |
||||
fullImageMenuItem |
String |
Label for "Full Image" menu item. |
||||
fullWidthMenuItem |
String |
Label for "Full Width" menu item. |
||||
fullHeightMenuItem |
String |
Label for "Full Height" menu item. |
||||
oneToOneRatioMenuItem |
String |
Label for "1 to 1 Ratio" menu item. |
||||
actualSizeMenuItem |
String |
Label for "Actual Size" menu item. |
||||
rotateRightMenuItem |
String |
Label for "Rotate Clockwise" menu item. |
||||
rotateLeftMenuItem |
String |
Label for "Rotate Counter-Clockwise" menu item. |
||||
mirrorHorizontalMenuItem |
String |
Label for "Mirror Horizontal" menu item. |
||||
mirrorVerticalMenuItem |
String |
Label for "Mirror Vertical" menu item. |
||||
Mouse Tools |
||||||
panToolMenuItem |
String |
Label for "Pan Tool" menu item. |
||||
areaSelectionToolMenuItem |
String |
Label for "Area Selection Tool" menu item. |
||||
zoomRectangleToolMenuItem |
String |
Label for "Zoom Rectangle Tool" menu item. |
||||
flyingMagnifierToolMenuItem |
String |
Label for "Flying Magnifier Tool" menu item. |
||||
createTextMarkToolMenuItem |
String |
Label for "Create Text Mark" menu item. |
||||
createLineMarkToolMenuItem |
String |
Label for "Create Line Mark" menu item. |
||||
createPolygonMarkToolMenuItem |
String |
Label for "Create Polygon Mark" menu item. |
||||
createPolylineMarkToolMenuItem |
String |
Label for "Create Polyline Mark" menu item. |
||||
createRectangleMarkToolMenuItem |
String |
Label for "Create Rectangle Mark" menu item. |
||||
createEllipseMarkToolMenuItem |
String |
Label for "Create Ellipse Mark" menu item. |
||||
createFreehandMarkToolMenuItem |
String |
Label for "Create Freehand Mark" menu item. |
||||
editMarksToolMenuItem |
String |
Label for "Edit Marks" menu item. |
||||
runMarksToolMenuItem |
String |
Label for "Run Marks" menu item. |
||||
Stamp Annotation |
||||||
createStampMarkToolMenuItem |
String |
Label for "Create Stamp Mark" menu item. |
||||
Mark Attributes |
||||||
thicknessMenu |
Object |
Parent object for Context Menu Mark Thickness labels.
|
||||
opacityMenu |
Object |
Parent object for Context Menu Opacity labels.
|
||||
calloutTypeMenu |
Object |
Parent object for Context Menu Callout Type labels.
|
||||
borderThicknessMenuItem |
String |
Label for "Border Thickness" menu item. |
||||
borderColorMenuItem |
String |
Label for "Border Color..." menu item. |
||||
fillColorMenuItem |
String |
Label for "Fill Color..." menu item. |
||||
lineThicknessMenuItem |
String |
Label for "Thickness" menu item. |
||||
lineColorMenuItem |
String |
Label for "Color..." menu item. |
||||
fontMenuItem |
String |
Label for "Font..." menu item. |
||||
opacityMenuItem |
String |
Label for "Opacity" menu item. |
||||
calloutTypeMenuItem |
String |
Label for "Callout Type" menu item. |
||||
calloutVisibleMenuItem |
String |
Label for "Callout Visible" menu item. |
||||
Mark Actions |
||||||
moveToBackMenuItem |
String |
Label for "Move to Back" menu item. |
||||
moveBackwardMenuItem |
String |
Label for "Move Backward" menu item. |
||||
moveForwardMenuItem |
String |
Label for "Move Forward" menu item. |
||||
moveToFrontMenuItem |
String |
Label for "Move to Front" menu item. |
||||
deleteMarkMenuItem |
String |
Label for "Delete Mark" menu item. |
||||
Menus |
||||||
zoomToFitMenuItem |
String |
Label for "Zoom to Fit" menu item. |
||||
orientationMenuItem |
String |
Label for "Orientation" menu item. |
||||
mouseToolsMenuItem |
String |
Label for "Mouse Tools" menu item. |
||||
rectangleMarkPropertiesMenuItem |
String |
Label for "Properties" menu item. |
||||
textMarkPropertiesMenuItem |
String |
Label for "Properties" menu item. |
||||
polygonMarkPropertiesMenuItem |
String |
Label for "Properties" menu item. |
||||
polylineMarkPropertiesMenuItem |
String |
Label for "Properties" menu item. |
||||
lineMarkPropertiesMenuItem |
String |
Label for "Properties" menu item. |
||||
markOrderingMenuItem |
String |
Label for "Ordering" menu item. |
||||
Dialog Boxes |
||||||
selectColor |
String |
Title for the "Select Color" dialog box. |
||||
selectFont |
String |
Title for the "Select Font" dialog box. |
||||
ok | String |
Label for the "OK" button in all dialog boxes. |
||||
cancel | String |
Label for the "CANCEL" button in all dialog boxes. |
||||
red | String |
Label for the "Red" field in the Select Color dialog box. |
||||
green | String |
Label for the "Green" field in the Select Color dialog box. |
||||
blue | String |
Label for the "Blue" field in the Select Color dialog box. |
||||
font | String |
Label for the "Font" field in the Select Font dialog box. |
||||
size | String |
Label for the "Size" field in the Select Font dialog box. |
||||
italic | String |
Label for the "Italic" checkbox in the Select Font dialog box. |
||||
bold | String |
Label for the "Bold" checkbox in the Select Font dialog box. |
||||
underline | String |
Label for the "Underline" checkbox in the Select Font dialog box. |
||||
strikeout | String |
Label for the "Strikeout" checkbox in the Select Font dialog box. |
Advanced search allows you to define a set of predefined search terms. To enable this functionality you must add the predefinedSearch property to the viewer parameters. The following example shows you how:
JavaScript Example |
Copy Code
|
---|---|
<script type="text/javascript"> $(document).ready(function () { var pluginOptions = { uiElements: { predefinedSearch: { highlightColor: "#ee3a8c", searchOnInit: false, globalOptions: { matchCase: false, endsWith: false, beginsWith: false, matchWholeWord: false }, terms: [{ searchTerm: "llama", selected: true, options: { matchWholeWord: true } }, { searchTerm: "Words that begin with ll", userDefinedRegex: "\\bll(\\w*)\\b", selected: true, highlightColor: "#4169e1", options: { matchCase: true } }] } } }; $("#sample").pccViewer(pluginOptions); }); </script> |
Parameter |
Data Type |
Description |
||||
highlightColor |
String |
The default highlight color of the search terms. This is overridden by the term-level parameter. This must be in 6 digit hexadecimal format preceded by a #. Example: "#ee3a8c" |
||||
searchOnInit |
Boolean |
Run search on launch. |
||||
globalOptions |
Object |
Set the default search options for each of the predefined search terms. This is overridden by the term-level "options" parameter.
|
||||
terms |
Array |
An array of objects that represent the search terms that will be available in the predefined menu.
|
Parameter |
Data Type |
Description |
||||
searchTerm |
String |
The search string for the term object. This is overridden by the userDefinedRegex parameter. |
||||
userDefinedRegex |
String |
A regular expression that will be searched in place of searchTerm. The first and last forward slashes, as well as the flags, are stripped from the string. For example, "/Pa(\\w+)/ig" will become "Pa(\\w+)". When special characters (ex: backslash) are used in the "userDefinedRegex" field, they need to be properly escaped. For example, for searching words that begins with "Pa", the regular expression will be "Pa(\w+)", this regular expression should be properly escaped like this "Pa(\\w+)". All patterns use the Global(g) flag.
|
||||
selected |
Boolean |
Whether or not this term will be selected in the menu. |
||||
options |
Object |
Set the search options for this term. If a parameter is not defined it will inherit the globalOptions-level parameter.
|
To disable the Advanced Search functionality, you must set the advancedSearch property to False:
JavaScript Example |
Copy Code
|
---|---|
<script type="text/javascript"> $(document).ready(function() { var pluginOptions = { uiElements: { advancedSearch: false } }; $("#sample").pccViewer(pluginOptions); }); </script> |